var util = require("../../../libs/util.js");
import * as echarts from '../components/echarts';
var app = getApp();
var chart;
Page({
  onShareAppMessage: function(res) {
    return {
      title: app.appName + '-温度监控',
      path: '/pages/report/pages/tp?shareMode=1&warehouse='
    }
  },
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    ec: {
      lazyLoad: true
    }
  },
  onLoad: function(e) {
    var that = this;
    that.setData({
      iotbox: e.iotbox,
      id: e.id
    })
    wx.showLoading({
      title: '加载中...',
      mask:true
    })
    // 获取组件
    this.ecComponent = this.selectComponent('#tp-chart');

    util.getData("/atapi/vehicle/vehicle/tp_monitor", {
      id: e.id,
      iotbox: e.iotbox
    }, function(res, error) {
      console.log(res);
      console.log(error)
      if (res.data.success) {
        that.setData(res.data.delivery)
        that.setData({
          startTime: res.data.startTime,
          endTime: res.data.endTime
        })
        that.chartInit(res.data.data, res.data.maxTp, res.data.minTp, res.data.startTime,res.data.shop);
      }else{
        wx.showModal({
          title: '温馨提示',
          content: '没有温度监控数据',
          success(res) {
            wx.navigateBack({
              delta: 1
            })
          }
        })
      }
      wx.hideLoading();
    });
  },
  onReady() {},
  // 点击按钮后初始化图表
  chartInit: function (data, maxTp, minTp, startTime, shop) {
    this.ecComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: app.globalData.width,
        height: app.globalData.height - app.globalData.CustomBar - 200
      });

      canvas.setChart(chart);

      setOption(chart, data, maxTp, minTp, startTime, shop);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },
});

function setOption(chart, data, maxTp, minTp, startTime, shop) {
  // var data = [];
  // var xdata = [];
  // var ydata = [];

  //var data = [["2019-08-22 08:12:12", 10], ["2019-08-22 08:13:12", 18], ["2019-08-22 08:16:12", 20], ["2019-08-22 08:19:12", 13]]
  var xdata = data.map(function(item) {
    return item[0];
  });
  var ydata = data.map(function(item) {
    return item[1];
  });

  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        snap:true,
        animation: true
      },
      position: function (pos, params, dom, rect, size) {
        // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
        var obj = { top: 60 };
        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: xdata,
      z:1
    },
    yAxis: {
      type: 'value'
    },
    dataZoom: [{
      show: true,
      startValue: startTime
    }, {
        type: 'inside'
    }],
    visualMap: {
      top: 10,
      right: 10,
      pieces: [{
        gt: 5,
        lte: 10,
        color: '#ff9933'
      }],
      outOfRange: {
        color: '#999'
      }
    },
    series: {
      name: '车厢温度',
      type: 'line',
      data: ydata,
      markLine: {
        silent: true,
        data: [{
          yAxis: maxTp,
          lineStyle: {
            color: '#1172cd'
          }
        }, {
          yAxis: minTp,
          lineStyle: {
            color: '#1172cd'
          }
        }]
      },
      smooth: true
    }
  };
  console.log(JSON.stringify(option))
  chart.setOption(option);
}